<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目基本信息 - 在线评测系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        /* 主要内容样式 */
        .main-content {
            padding: 20px;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e8e8e8;
        }

        .page-title {
            font-size: 20px;
            font-weight: 500;
            color: #333;
        }

        .btn-group {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 16px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .btn-primary {
            background-color: #1890ff;
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #40a9ff;
        }

        .btn-default {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #d9d9d9;
        }

        .btn-default:hover {
            background-color: #e8e8e8;
        }

        /* 步骤导航 */
        .steps-container {
            display: flex;
            margin: 30px 0;
            position: relative;
        }

        .steps-container::before {
            content: '';
            position: absolute;
            top: 16px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e8e8e8;
            z-index: 1;
        }

        .step {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .step-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f5f5f5;
            border: 2px solid #e8e8e8;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 10px;
            font-weight: bold;
            color: #999;
        }

        .step.active .step-icon {
            background-color: #1890ff;
            border-color: #1890ff;
            color: #fff;
        }

        .step.completed .step-icon {
            background-color: #52c41a;
            border-color: #52c41a;
            color: #fff;
        }

        .step-title {
            font-size: 14px;
            color: #999;
            margin-top: 5px;
        }

        .step.active .step-title {
            color: #1890ff;
            font-weight: 500;
        }

        .step.completed .step-title {
            color: #52c41a;
        }

        /* 表单样式 */
        .form-container {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            padding: 25px;
            margin-bottom: 20px;
        }

        .form-header {
            padding-bottom: 15px;
            margin-bottom: 20px;
            border-bottom: 1px solid #e8e8e8;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .form-title {
            font-size: 18px;
            font-weight: 500;
            color: #333;
        }

        .form-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            table-layout: fixed;
        }

        .form-table th,
        .form-table td {
            border: 1px solid #e8e8e8;
            padding: 12px 15px;
            text-align: left;
            vertical-align: top;
        }

        .form-table th {
            width: 20%;
            background-color: #f9f9f9;
            font-weight: normal;
            color: #333;
        }

        .form-table .required::before {
            content: '*';
            color: #f5222d;
            margin-right: 4px;
        }

        .help-icon {
            color: #bfbfbf;
            cursor: help;
            margin-left: 5px;
            font-size: 14px;
        }

        .help-icon:hover {
            color: #1890ff;
        }

        .form-table input[type="text"],
        .form-table input[type="date"],
        .form-table textarea,
        .form-table select {
            width: 100%;
            padding: 8px 12px;
            border: none;
            border-radius: 0;
            transition: all 0.3s;
            font-family: inherit;
            font-size: 14px;
            background-color: transparent;
        }

        .form-table input[type="text"]:focus,
        .form-table input[type="date"]:focus,
        .form-table textarea:focus,
        .form-table select:focus {
            outline: none;
            box-shadow: none;
        }

        .form-table textarea {
            min-height: 120px;
            resize: vertical;
        }

        .form-table textarea::placeholder {
            color: #b0b0b0; /* 灰色 */
            font-style: italic; /* 斜体 */
        }

        .form-description {
            color: #8c8c8c;
            font-size: 13px;
            margin-top: 4px;
        }

        .text-muted {
            color: #8c8c8c;
        }

        .form-actions {
            display: flex;
            justify-content: center;
            margin-top: 30px;
            gap: 15px;
        }

        .form-actions .btn {
            min-width: 100px;
        }

        /* 提示信息 */
        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltip-text {
            visibility: hidden;
            width: 200px;
            background-color: #333;
            color: #fff;
            text-align: left;
            border-radius: 4px;
            padding: 8px 12px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
            line-height: 1.5;
        }

        .tooltip .tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #333 transparent transparent transparent;
        }

        .tooltip:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        .checkbox-group {
            display: flex;
            gap: 20px;
        }

        .checkbox-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* 附件上传 */
        .upload-container {
            margin-top: 10px;
            border: 1px dashed #d9d9d9;
            border-radius: 4px;
            padding: 15px;
            text-align: center;
            background-color: #fafafa;
        }

        .upload-container:hover {
            border-color: #1890ff;
        }

        .upload-text {
            font-size: 14px;
            color: #8c8c8c;
            margin-top: 8px;
        }

        .file-list {
            margin-top: 15px;
            list-style: none;
        }

        .file-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .file-name {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #333;
        }

        .file-icon {
            color: #1890ff;
        }

        .file-actions {
            display: flex;
            gap: 10px;
        }

        .file-actions button {
            background: none;
            border: none;
            cursor: pointer;
            color: #8c8c8c;
            font-size: 14px;
        }

        .file-actions button:hover {
            color: #1890ff;
        }

        .not-applicable-checkbox {
            margin-top: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #333;
        }
        
        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none; /* 默认隐藏 */
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        
        .modal-content {
            background-color: #fff;
            padding: 25px;
            border-radius: 8px;
            width: 90%;
            max-width: 1000px;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e8e8e8;
            padding-bottom: 15px;
            margin-bottom: 20px;
        }
        
        .modal-header h2 {
            font-size: 18px;
            font-weight: 500;
        }
        
        .modal-close-btn {
            background: none;
            border: none;
            font-size: 28px;
            cursor: pointer;
            color: #888;
            line-height: 1;
        }
        
        /* 自定义提示框样式 */
        .custom-alert-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 2000;
        }
        
        .custom-alert-content {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            width: 90%;
            max-width: 360px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.2);
            animation: alertFadeIn 0.3s ease-out;
        }
        
        @keyframes alertFadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .custom-alert-message-container {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .custom-alert-icon {
            font-size: 20px;
            color: #ff4d4f;
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .custom-alert-message {
            font-size: 16px;
            color: #333;
        }
        
        .custom-alert-actions {
            display: flex;
            justify-content: center;
        }
        
        .custom-alert-actions .btn {
            min-width: 80px;
            padding: 6px 15px;
            font-size: 14px;
        }
        
        .preview-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        .preview-table th, .preview-table td {
            border: 1px solid #e8e8e8;
            padding: 10px 12px;
            text-align: left;
        }
        
        .preview-table th {
            background-color: #f9f9f9;
            font-weight: 500;
            width: 20%;
        }
    </style>
</head>
<body>
    <div class="main-content">
        <!-- 步骤导航 -->
        <div class="steps-container">
            <div class="step active">
                <div class="step-icon">1</div>
                <div class="step-title">基本信息</div>
            </div>
            <div class="step">
                <div class="step-icon">2</div>
                <div class="step-title">预算总表</div>
            </div>
            <div class="step">
                <div class="step-icon">3</div>
                <div class="step-title">产品购置明细</div>
            </div>
            <div class="step">
                <div class="step-icon">4</div>
                <div class="step-title">软件开发明细</div>
            </div>
            <div class="step">
                <div class="step-icon">5</div>
                <div class="step-title">实施服务明细</div>
            </div>
            <div class="step">
                <div class="step-icon">6</div>
                <div class="step-title">市级政务云租用</div>
            </div>
        </div>

        <!-- 表单 -->
        <div class="form-container">
            <div class="form-header">
                <h2 class="form-title">项目基本信息</h2>
                <div class="btn-group">
                    <button class="btn btn-default" id="previewBtn">
                        <i class="fas fa-eye"></i> 预览
                    </button>
                    <button class="btn btn-default" id="exportBtn">
                        <i class="fas fa-file-export"></i> 导出
                    </button>
                </div>
            </div>

            <form id="projectForm">
                <table class="form-table">
                    <tr>
                        <th>项目类型</th>
                        <td>
                            <div class="checkbox-group">
                                <div class="checkbox-item">
                                    <input type="checkbox" id="hardwareType" name="projectType" value="hardware">
                                    <label for="hardwareType">硬件类</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="softwareType" name="projectType" value="software">
                                    <label for="softwareType">软件类</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="engineeringType" name="projectType" value="engineering">
                                    <label for="engineeringType">工程类</label>
                                </div>
                                <div class="checkbox-item">
                                    <input type="checkbox" id="otherType" name="projectType" value="other">
                                    <label for="otherType">其它</label>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th class="required">项目名称</th>
                        <td>
                            <input type="text" id="projectName" name="projectName" required>
                        </td>
                    </tr>
                    <tr>
                        <th class="required">申报单位（盖章）</th>
                        <td>
                            <input type="text" id="applyUnit" name="applyUnit" required>
                        </td>
                    </tr>
                    <tr>
                        <th class="required">项目负责人</th>
                        <td>
                            <input type="text" id="projectManager" name="projectManager" required>
                        </td>
                    </tr>
                    <tr>
                        <th class="required">项目联系人</th>
                        <td>
                            <input type="text" id="contactPerson" name="contactPerson" required>
                        </td>
                    </tr>
                    <tr>
                        <th class="required">联系电话</th>
                        <td>
                            <input type="text" id="contactPhone" name="contactPhone" required>
                        </td>
                    </tr>
                    <tr>
                        <th class="required">申报时间</th>
                        <td>
                            <input type="date" id="applyDate" name="applyDate" required>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            背景、现状和必要性
                            <span class="tooltip">
                                <i class="fas fa-question-circle help-icon"></i>
                                <span class="tooltip-text">包括：背景、现状、项目必要性</span>
                            </span>
                        </th>
                        <td>
                            <textarea id="background" name="background" placeholder="包括：背景、现状、项目必要性"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            需求分析
                            <span class="tooltip">
                                <i class="fas fa-question-circle help-icon"></i>
                                <span class="tooltip-text">包括：业务需求、功能需求、数据需求、性能需求、安全需求</span>
                            </span>
                        </th>
                        <td>
                            <textarea id="requirements" name="requirements" placeholder="包括：业务需求、功能需求、数据需求、性能需求、安全需求"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            建设目标
                            <span class="tooltip">
                                <i class="fas fa-question-circle help-icon"></i>
                                <span class="tooltip-text">包括：业务目标、技术目标、预期绩效</span>
                            </span>
                        </th>
                        <td>
                            <textarea id="goals" name="goals" placeholder="包括：业务目标、技术目标、预期绩效"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            建设方案
                            <span class="tooltip">
                                <i class="fas fa-question-circle help-icon"></i>
                                <span class="tooltip-text">包括：建设原则、设计依据、总体建设任务与分期建设内容、总体框架、技术方案（应用软件开发、信息资源建设、主机系统硬件和软件配置、网络及综合布线、安全存储备份系统、安防系统、机房、其它）、设备选型原则及关键技术指标</span>
                            </span>
                        </th>
                        <td>
                            <textarea id="plan" name="plan" placeholder="包括：建设原则、设计依据、总体建设任务与分期建设内容、总体框架、技术方案（应用软件开发、信息资源建设、主机系统硬件和软件配置、网络及综合布线、安全存储备份系统、安防系统、机房、其它）、设备选型原则及关键技术指标"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            项目实施方案及保障措施
                            <span class="tooltip">
                                <i class="fas fa-question-circle help-icon"></i>
                                <span class="tooltip-text">包括：实施进度、监理、安全测评及软件测评、相关保障措施、其他相关内容</span>
                            </span>
                        </th>
                        <td>
                            <textarea id="implementation" name="implementation" placeholder="包括：实施进度、监理、安全测评及软件测评、相关保障措施、其他相关内容"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>
                            投资预算
                            <span class="tooltip">
                                <i class="fas fa-question-circle help-icon"></i>
                                <span class="tooltip-text">包括：说明资金来源预算年度、部门预算还是专项资金。投资编制说明：说明集成费、监理费、测评费等费用的核算依据。</span>
                            </span>
                        </th>
                        <td>
                            <textarea id="budget" name="budget" placeholder="包括：说明资金来源预算年度、部门预算还是专项资金。投资编制说明：说明集成费、监理费、测评费等费用的核算依据。"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <th>附件上传</th>
                        <td>
                            <div class="upload-container">
                                <i class="fas fa-upload" style="font-size: 24px; color: #8c8c8c;"></i>
                                <p class="upload-text">点击或拖拽文件到此处上传</p>
                                <input type="file" id="fileUpload" style="display: none;" multiple>
                            </div>
                            <ul class="file-list">
                                <!-- 文件列表将通过JavaScript动态生成 -->
                            </ul>
                        </td>
                    </tr>
                </table>

                <div class="form-actions">
                    <button type="button" class="btn btn-default" id="prevBtn" disabled>
                        <i class="fas fa-arrow-left"></i> 上一步
                    </button>
                    <button type="button" class="btn btn-default" id="saveBtn">
                        <i class="fas fa-save"></i> 保存
                    </button>
                    <button type="button" class="btn btn-primary" id="nextBtn">
                        下一步 <i class="fas fa-arrow-right"></i>
                    </button>
                    <button type="button" class="btn btn-primary" id="submitBtn" disabled>
                        确认提交审核
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div id="previewModal" class="modal-overlay">
        <div class="modal-content">
            <div class="modal-header">
                <h2>项目基本信息预览</h2>
                <button class="modal-close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <!-- 预览表格将由JavaScript动态插入 -->
            </div>
        </div>
    </div>
    
    <!-- 自定义提示框 -->
    <div id="customAlert" class="custom-alert-overlay">
        <div class="custom-alert-content">
            <div class="custom-alert-message-container">
                <span class="custom-alert-icon">
                    <i class="fas fa-exclamation-circle"></i>
                </span>
                <div class="custom-alert-message"></div>
            </div>
            <div class="custom-alert-actions">
                <button id="customAlertClose" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>

    <script>
        // 获取URL参数并填充表单
        function getUrlParams() {
            const urlParams = new URLSearchParams(window.location.search);
            const params = {};
            for(const [key, value] of urlParams.entries()) {
                params[key] = value;
            }
            return params;
        }
        
        // 页面加载时填充表单数据
        window.addEventListener('DOMContentLoaded', function() {
            const params = getUrlParams();
            const action = params.action || '';
            
            // 如果是从汇总页面点击"查看"按钮跳转过来的
            if (action === 'view') {
                // 设置表单为只读模式
                setFormReadOnly(true);
                
                // 添加返回按钮
                addBackButton();
                
                // 如果有项目ID，可以根据ID加载项目数据
                // 这里简单地用URL参数填充一些基本字段
                if (params.name) document.getElementById('projectName').value = params.name;
                if (params.responsible) document.getElementById('projectManager').value = params.responsible;
                if (params.department) document.getElementById('applyUnit').value = params.department;
                if (params.date) document.getElementById('applyDate').value = formatDate(params.date);
                
                // 隐藏不需要的按钮
                document.getElementById('saveBtn').style.display = 'none';
                document.getElementById('nextBtn').style.display = 'none';
            }
            
            // 检查提交按钮状态
            checkSubmitButtonStatus();
        });
        
        // 设置表单为只读模式
        function setFormReadOnly(isReadOnly) {
            const inputs = document.querySelectorAll('input, textarea, select');
            inputs.forEach(input => {
                input.readOnly = isReadOnly;
                if (input.type === 'checkbox' || input.type === 'radio') {
                    input.disabled = isReadOnly;
                }
            });
            
            // 禁用文件上传
            if (isReadOnly) {
                document.querySelector('.upload-container').style.pointerEvents = 'none';
                document.querySelector('.upload-container').style.opacity = '0.7';
                
                // 隐藏文件删除按钮
                const deleteButtons = document.querySelectorAll('.delete-file');
                deleteButtons.forEach(btn => {
                    btn.style.display = 'none';
                });
            }
        }
        
        // 添加返回按钮
        function addBackButton() {
            const formActions = document.querySelector('.form-actions');
            
            // 创建返回按钮
            const backBtn = document.createElement('button');
            backBtn.type = 'button';
            backBtn.className = 'btn btn-default';
            backBtn.innerHTML = '<i class="fas fa-arrow-left"></i> 返回';
            backBtn.addEventListener('click', function() {
                window.location.href = '../../project-summary.html';
            });
            
            // 清空按钮区域并添加返回按钮
            formActions.innerHTML = '';
            formActions.appendChild(backBtn);
        }
        
        // 格式化日期
        function formatDate(dateString) {
            // 处理常见的日期格式，如"2022-01-14"
            if (dateString && dateString.match(/\d{4}-\d{2}-\d{2}/)) {
                return dateString;
            }
            
            // 如果日期格式不匹配，返回空字符串
            return '';
        }
        
        // 自定义提示框
        function showCustomAlert(message) {
            // 检查是否已存在提示框
            let alertBox = document.getElementById('customAlertBox');
            
            if (!alertBox) {
                // 创建提示框
                alertBox = document.createElement('div');
                alertBox.id = 'customAlertBox';
                alertBox.style.position = 'fixed';
                alertBox.style.top = '50%';
                alertBox.style.left = '50%';
                alertBox.style.transform = 'translate(-50%, -50%)';
                alertBox.style.backgroundColor = 'white';
                alertBox.style.padding = '20px';
                alertBox.style.borderRadius = '8px';
                alertBox.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
                alertBox.style.zIndex = '2000';
                alertBox.style.minWidth = '300px';
                alertBox.style.textAlign = 'center';
                alertBox.style.animation = 'fadeIn 0.3s';
                
                // 添加动画样式
                const style = document.createElement('style');
                style.textContent = `
                    @keyframes fadeIn {
                        from { opacity: 0; transform: translate(-50%, -60%); }
                        to { opacity: 1; transform: translate(-50%, -50%); }
                    }
                `;
                document.head.appendChild(style);
                
                // 创建遮罩层
                const overlay = document.createElement('div');
                overlay.style.position = 'fixed';
                overlay.style.top = '0';
                overlay.style.left = '0';
                overlay.style.width = '100%';
                overlay.style.height = '100%';
                overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                overlay.style.zIndex = '1999';
                document.body.appendChild(overlay);
                
                // 不添加标题，直接显示消息
                
                // 创建消息容器
                const messageDiv = document.createElement('div');
                messageDiv.textContent = message;
                messageDiv.style.margin = '15px 0';
                messageDiv.style.fontSize = '16px';
                messageDiv.style.color = '#333';
                alertBox.appendChild(messageDiv);
                
                // 创建确定按钮
                const confirmBtn = document.createElement('button');
                confirmBtn.textContent = '确定';
                confirmBtn.style.backgroundColor = '#4e7bef';
                confirmBtn.style.color = 'white';
                confirmBtn.style.border = 'none';
                confirmBtn.style.padding = '8px 40px';
                confirmBtn.style.borderRadius = '4px';
                confirmBtn.style.fontSize = '14px';
                confirmBtn.style.cursor = 'pointer';
                confirmBtn.style.transition = 'background-color 0.3s';
                
                confirmBtn.onmouseover = function() {
                    this.style.backgroundColor = '#3d6ae8';
                };
                
                confirmBtn.onmouseout = function() {
                    this.style.backgroundColor = '#4e7bef';
                };
                
                confirmBtn.onclick = function() {
                    document.body.removeChild(alertBox);
                    document.body.removeChild(overlay);
                };
                
                alertBox.appendChild(confirmBtn);
                document.body.appendChild(alertBox);
            } else {
                // 更新已存在提示框的消息
                alertBox.querySelector('div:nth-child(1)').textContent = message;
            }
        }
        
        // 显示预览
        function showPreview() {
            const modalBody = document.querySelector('#previewModal .modal-body');
            let tableHTML = `<table class="preview-table">
                <tbody>
                    <tr>
                        <th>项目类型</th>
                        <td>${getSelectedProjectTypes()}</td>
                    </tr>
                    <tr>
                        <th>项目名称</th>
                        <td>${document.getElementById('projectName').value || ''}</td>
                    </tr>
                    <tr>
                        <th>申报单位（盖章）</th>
                        <td>${document.getElementById('applyUnit').value || ''}</td>
                    </tr>
                    <tr>
                        <th>项目负责人</th>
                        <td>${document.getElementById('projectManager').value || ''}</td>
                    </tr>
                    <tr>
                        <th>项目联系人</th>
                        <td>${document.getElementById('contactPerson').value || ''}</td>
                    </tr>
                    <tr>
                        <th>联系电话</th>
                        <td>${document.getElementById('contactPhone').value || ''}</td>
                    </tr>
                    <tr>
                        <th>申报时间</th>
                        <td>${document.getElementById('applyDate').value || ''}</td>
                    </tr>
                    <tr>
                        <th>背景、现状和必要性</th>
                        <td>${document.getElementById('background').value || ''}</td>
                    </tr>
                    <tr>
                        <th>需求分析</th>
                        <td>${document.getElementById('requirements').value || ''}</td>
                    </tr>
                    <tr>
                        <th>建设目标</th>
                        <td>${document.getElementById('goals').value || ''}</td>
                    </tr>
                    <tr>
                        <th>建设方案</th>
                        <td>${document.getElementById('plan').value || ''}</td>
                    </tr>
                    <tr>
                        <th>项目实施方案及保障措施</th>
                        <td>${document.getElementById('implementation').value || ''}</td>
                    </tr>
                    <tr>
                        <th>投资预算</th>
                        <td>${document.getElementById('budget').value || ''}</td>
                    </tr>
                    <tr>
                        <th>附件</th>
                        <td>${getAttachmentsList()}</td>
                    </tr>
                </tbody>
            </table>`;
            
            modalBody.innerHTML = tableHTML;
            document.getElementById('previewModal').style.display = 'flex';
        }
        
        // 获取选中的项目类型
        function getSelectedProjectTypes() {
            const checkboxes = document.querySelectorAll('input[name="projectType"]:checked');
            const types = [];
            checkboxes.forEach(checkbox => {
                switch(checkbox.value) {
                    case 'hardware':
                        types.push('硬件类');
                        break;
                    case 'software':
                        types.push('软件类');
                        break;
                    case 'engineering':
                        types.push('工程类');
                        break;
                    case 'other':
                        types.push('其它');
                        break;
                }
            });
            return types.join('、') || '未选择';
        }
        
        // 获取附件列表
        function getAttachmentsList() {
            const fileItems = document.querySelectorAll('.file-item');
            if (fileItems.length === 0) {
                return '无附件';
            }
            
            let fileList = '<ul style="padding-left: 20px; margin: 0;">';
            fileItems.forEach(item => {
                const fileName = item.querySelector('.file-name').textContent.trim();
                fileList += `<li>${fileName}</li>`;
            });
            fileList += '</ul>';
            return fileList;
        }
        
        // 导出到Excel
        function exportToExcel() {
            // 创建数据数组
            const data = [
                ['项目基本信息表', ''],
                ['', ''],
                ['项目类型', getSelectedProjectTypes()],
                ['项目名称', document.getElementById('projectName').value || ''],
                ['申报单位（盖章）', document.getElementById('applyUnit').value || ''],
                ['项目负责人', document.getElementById('projectManager').value || ''],
                ['项目联系人', document.getElementById('contactPerson').value || ''],
                ['联系电话', document.getElementById('contactPhone').value || ''],
                ['申报时间', document.getElementById('applyDate').value || ''],
                ['背景、现状和必要性', document.getElementById('background').value || ''],
                ['需求分析', document.getElementById('requirements').value || ''],
                ['建设目标', document.getElementById('goals').value || ''],
                ['建设方案', document.getElementById('plan').value || ''],
                ['项目实施方案及保障措施', document.getElementById('implementation').value || ''],
                ['投资预算', document.getElementById('budget').value || '']
            ];
            
            // 创建工作表
            const worksheet = XLSX.utils.aoa_to_sheet(data);
            
            // 设置列宽
            worksheet['!cols'] = [
                { wch: 25 }, { wch: 80 }
            ];
            
            // 合并标题单元格
            worksheet['!merges'] = [
                { s: { r: 0, c: 0 }, e: { r: 0, c: 1 } }
            ];
            
            // 创建工作簿并添加工作表
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, '项目基本信息');
            
            // 下载Excel文件
            XLSX.writeFile(workbook, '项目基本信息.xlsx');
        }

        // 上传文件功能
        document.querySelector('.upload-container').addEventListener('click', function() {
            document.getElementById('fileUpload').click();
        });

        document.getElementById('fileUpload').addEventListener('change', function(event) {
            const fileList = document.querySelector('.file-list');
            const files = event.target.files;
            
            for (let i = 0; i < files.length; i++) {
                const file = files[i];
                const fileItem = document.createElement('li');
                fileItem.className = 'file-item';
                
                const fileName = document.createElement('div');
                fileName.className = 'file-name';
                
                let fileIcon = 'fa-file';
                if (file.name.endsWith('.pdf')) fileIcon = 'fa-file-pdf';
                else if (file.name.endsWith('.doc') || file.name.endsWith('.docx')) fileIcon = 'fa-file-word';
                else if (file.name.endsWith('.xls') || file.name.endsWith('.xlsx')) fileIcon = 'fa-file-excel';
                
                fileName.innerHTML = `<i class="fas ${fileIcon} file-icon"></i> ${file.name}`;
                
                const fileActions = document.createElement('div');
                fileActions.className = 'file-actions';
                fileActions.innerHTML = `
                    <button type="button" title="预览"><i class="fas fa-eye"></i></button>
                    <button type="button" title="下载"><i class="fas fa-download"></i></button>
                    <button type="button" title="删除" class="delete-file"><i class="fas fa-trash-alt"></i></button>
                `;
                
                fileItem.appendChild(fileName);
                fileItem.appendChild(fileActions);
                fileList.appendChild(fileItem);
            }
            
            // 清除文件输入，允许再次选择相同文件
            event.target.value = '';
        });
        
        // 文件删除功能
        document.addEventListener('click', function(event) {
            if (event.target.closest('.delete-file')) {
                const fileItem = event.target.closest('.file-item');
                fileItem.remove();
            }
        });

        // 预览按钮事件
        document.getElementById('previewBtn').addEventListener('click', showPreview);
        
        // 导出按钮事件
        document.getElementById('exportBtn').addEventListener('click', exportToExcel);
        
        // 关闭模态框按钮事件
        document.querySelector('.modal-close-btn').addEventListener('click', function() {
            document.getElementById('previewModal').style.display = 'none';
        });
        
        // 点击模态框背景关闭模态框
        document.getElementById('previewModal').addEventListener('click', function(event) {
            if (event.target === this) {
                this.style.display = 'none';
            }
        });

        // 保存按钮功能
        document.getElementById('saveBtn').addEventListener('click', function() {
            showCustomAlert('项目基本信息已保存');
        });

        // 自定义确认框
        function showCustomConfirm(message, callback) {
            // 检查是否已存在提示框
            let confirmBox = document.getElementById('customConfirmBox');
            
            if (!confirmBox) {
                // 创建提示框
                confirmBox = document.createElement('div');
                confirmBox.id = 'customConfirmBox';
                confirmBox.style.position = 'fixed';
                confirmBox.style.top = '50%';
                confirmBox.style.left = '50%';
                confirmBox.style.transform = 'translate(-50%, -50%)';
                confirmBox.style.backgroundColor = 'white';
                confirmBox.style.padding = '20px';
                confirmBox.style.borderRadius = '8px';
                confirmBox.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
                confirmBox.style.zIndex = '2000';
                confirmBox.style.minWidth = '300px';
                confirmBox.style.textAlign = 'center';
                confirmBox.style.animation = 'fadeIn 0.3s';
                
                // 创建遮罩层
                const overlay = document.createElement('div');
                overlay.style.position = 'fixed';
                overlay.style.top = '0';
                overlay.style.left = '0';
                overlay.style.width = '100%';
                overlay.style.height = '100%';
                overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
                overlay.style.zIndex = '1999';
                document.body.appendChild(overlay);
                
                // 不添加标题，直接显示消息
                
                // 创建消息容器
                const messageDiv = document.createElement('div');
                messageDiv.textContent = message;
                messageDiv.style.margin = '15px 0';
                messageDiv.style.fontSize = '16px';
                messageDiv.style.color = '#333';
                confirmBox.appendChild(messageDiv);
                
                // 创建按钮容器
                const buttonContainer = document.createElement('div');
                buttonContainer.style.display = 'flex';
                buttonContainer.style.justifyContent = 'center';
                buttonContainer.style.gap = '15px';
                buttonContainer.style.marginTop = '15px';
                
                // 创建取消按钮
                const cancelBtn = document.createElement('button');
                cancelBtn.textContent = '取消';
                cancelBtn.style.backgroundColor = '#f5f5f5';
                cancelBtn.style.color = '#333';
                cancelBtn.style.border = '1px solid #d9d9d9';
                cancelBtn.style.padding = '8px 20px';
                cancelBtn.style.borderRadius = '4px';
                cancelBtn.style.fontSize = '14px';
                cancelBtn.style.cursor = 'pointer';
                cancelBtn.style.transition = 'background-color 0.3s';
                
                cancelBtn.onmouseover = function() {
                    this.style.backgroundColor = '#e8e8e8';
                };
                
                cancelBtn.onmouseout = function() {
                    this.style.backgroundColor = '#f5f5f5';
                };
                
                cancelBtn.onclick = function() {
                    document.body.removeChild(confirmBox);
                    document.body.removeChild(overlay);
                };
                
                // 创建确定按钮
                const confirmBtn = document.createElement('button');
                confirmBtn.textContent = '确定';
                confirmBtn.style.backgroundColor = '#4e7bef';
                confirmBtn.style.color = 'white';
                confirmBtn.style.border = 'none';
                confirmBtn.style.padding = '8px 20px';
                confirmBtn.style.borderRadius = '4px';
                confirmBtn.style.fontSize = '14px';
                confirmBtn.style.cursor = 'pointer';
                confirmBtn.style.transition = 'background-color 0.3s';
                
                confirmBtn.onmouseover = function() {
                    this.style.backgroundColor = '#3d6ae8';
                };
                
                confirmBtn.onmouseout = function() {
                    this.style.backgroundColor = '#4e7bef';
                };
                
                confirmBtn.onclick = function() {
                    document.body.removeChild(confirmBox);
                    document.body.removeChild(overlay);
                    if (typeof callback === 'function') {
                        callback(true);
                    }
                };
                
                buttonContainer.appendChild(cancelBtn);
                buttonContainer.appendChild(confirmBtn);
                confirmBox.appendChild(buttonContainer);
                
                document.body.appendChild(confirmBox);
            }
        }
        
        // 检查提交按钮状态
        function checkSubmitButtonStatus() {
            // 从localStorage获取所有页面的完成状态
            const basicInfoCompleted = localStorage.getItem('basicInfoCompleted') === 'true';
            const budgetCompleted = localStorage.getItem('budgetCompleted') === 'true';
            const productCompleted = localStorage.getItem('productCompleted') === 'true';
            const softwareCompleted = localStorage.getItem('softwareCompleted') === 'true';
            const implementationCompleted = localStorage.getItem('implementationCompleted') === 'true';
            const cloudCompleted = localStorage.getItem('cloudCompleted') === 'true';
            
            // 只有当所有页面都完成时，才启用提交按钮
            const allCompleted = basicInfoCompleted && budgetCompleted && productCompleted && 
                                softwareCompleted && implementationCompleted && cloudCompleted;
            
            document.getElementById('submitBtn').disabled = !allCompleted;
            
            if (allCompleted) {
                document.getElementById('submitBtn').style.opacity = '1';
            } else {
                document.getElementById('submitBtn').style.opacity = '0.6';
            }
        }
        
        // 下一步按钮功能
        document.getElementById('nextBtn').addEventListener('click', function() {
            const requiredFields = document.querySelectorAll('input[required], textarea[required]');
            let isValid = true;
            
            // 首先重置所有必填字段单元格的边框颜色
            requiredFields.forEach(field => {
                if (field.parentElement.tagName === 'TD') {
                    field.parentElement.style.borderColor = '';
                }
            });
            
            requiredFields.forEach(field => {
                if (!field.value.trim()) {
                    isValid = false;
                    // 高亮单元格边框而不是输入框边框
                    if (field.parentElement.tagName === 'TD') {
                        field.parentElement.style.borderColor = '#f5222d';
                    }
                }
            });
            
            if (isValid) {
                // 标记当前页面已完成
                localStorage.setItem('basicInfoCompleted', 'true');
                
                // 检查提交按钮状态
                checkSubmitButtonStatus();
                
                window.location.href = 'project-budget.html';
            } else {
                showCustomAlert('请填写所有带*的项!');
            }
        });

        // 提交按钮功能
        document.getElementById('submitBtn').addEventListener('click', function() {
            if (!this.disabled) {
                showCustomConfirm('确认提交项目申报审核吗？提交后将不能再修改。', function(confirmed) {
                    if (confirmed) {
                        showCustomAlert('项目申报已提交审核，请等待审核结果。');
                        setTimeout(function() {
                            window.location.href = '../project-submit.html';
                        }, 1500);
                    }
                });
            }
        });

        // "该表不适用于本项目"复选框功能
        const notApplicableCheckbox = document.getElementById('notApplicable');
        notApplicableCheckbox.addEventListener('change', function() {
            const inputs = document.querySelectorAll('input:not([type="checkbox"]), textarea');
            
            if (this.checked) {
                inputs.forEach(input => {
                    input.disabled = true;
                    input.style.backgroundColor = '#f5f5f5';
                });
                document.getElementById('nextBtn').click();
            } else {
                inputs.forEach(input => {
                    input.disabled = false;
                    input.style.backgroundColor = '';
                });
            }
        });
    </script>
</body>
</html> 